<template>
  <div class="login_container">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-form class="login_form">
          <h1>Hellow</h1>
          <h3>欢迎来到甄选平台</h3>
          <el-form-item prop="username">
            <el-input v-model="ruleForm.username" placeholder="请输入账号" :prefix-icon="User" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="ruleForm.password"
              placeholder="请输入密码"
              :prefix-icon="Lock"
              type="password"
              autocomplete="off"
              show-password
            />
          </el-form-item>
          <el-form-item>
            <el-button :loading="loading" class="w-full" type="primary" @click="submitForm(ruleFormRef)"> 登 录 </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { User, Lock } from "@element-plus/icons-vue";
import { ref, reactive } from "vue";
import { ElNotification, ElMessage } from "element-plus";

// 引入路由
import { useRouter } from "vue-router";
let $router = useRouter();

let ruleForm = reactive({
  username: "admin",
  password: "@Dmin123##"
});

// 引入用户相关的小仓库
import userStore from "@/store/modules/user";
let userLoginStore = userStore();

// 按钮开始加载效果
let loading = ref(false);

// 方法一
const submitForm = async () => {
  // 开始加载
  loading.value = true;
  try {
    await userLoginStore.userLogin(ruleForm);
    console.log("chenggong");
    $router.push({
      path: "/"
    });
    ElNotification({
      message: "登录成功",
      type: "success"
    });
    loading.value = false
  } catch (error) {
    console.log("shibai");
    ElNotification({
      message: "账号或密码不正确",
      type: "error"
    });
    loading.value = false
  }
};

// 方法二
// 根据仓库中直接返回 res 在这里处理
// const submitForm = () => {
//   console.log("登录");
//   // 开始加载
//   loading.value = true;
//   userLoginStore.userLogin(ruleForm).then(response => {
//     console.log(response, "++++++++++++++");
//     if (response.code == 200) {
//       // $router.push({
//       //   path: "/"
//       // });
//       ElMessage({
//         message: "登录成功",
//         type: "success"
//       });
//       // 仓库中的 token 需要重新赋值
//       userLoginStore.token = response.data.token
//       localStorage.setItem('TOKEN',response.data.token);

//       loading.value = false;
//     } else {
//       ElMessage({
//         message: response.data.message,
//         type: "error"
//       });
//       loading.value = false;
//     }
//   });
// };

// 方法三
// const submitForm = async () => {
//   // 开始加载
//   loading.value = true;
//   let userLoginStoreRes = await userLoginStore.userLogin(ruleForm)
//   console.log(userLoginStoreRes,'方法三打印');
//   if(userLoginStoreRes == true) {
//     $router.push({
//       path: "/"
//     });
//     loading.value = false;
//     ElMessage({
//       message: "登录成功",
//       type: "success"
//     });
//   } else {
//     loading.value = false;
//     ElMessage({
//       message: userLoginStoreRes,
//       type: "error"
//     });
//   }
// };


</script>

<style lang="scss" scoped>
.login_container {
  height: 100vh;
  width: 100vw;
  background: url("@/assets/images/login.gif") no-repeat;
  background-size: cover;
}
// .formDiv {
//   width: 100%;
//   height: 50%;
//   display: flex;
//   justify-content: center;
// }
.login_form {
  position: relative;
  width: 50%;
  text-align: center;
}
.login_button {
  text-align: center;
}
:deep(.el-col-12) {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
